import React from 'react';
import styles from  "./userDropDown.module.less"
import { List, Button, Avatar, Row, Col  } from 'antd';
import { InstagramOutlined, QuestionCircleOutlined } from '@ant-design/icons'
import avatar from "../../../assets/images/avatar.jpg"
const UserDropDown = (props)=>{
    const {onClick } = props
    const data = [
        {
            name: "xiaolang",
            avatar,
            href:"/user"
        }
    ]
    return (
        <div className={styles.userInfoConent} >
            <List
                itemLayout="horizontal"
                dataSource={data}
                renderItem={item => (
                    <List.Item>
                        <List.Item.Meta
                            avatar={<Avatar src={item.avatar} style={{ width: "56px",height:"56px"}} />}
                            title={<a href={item.href}>{item.name}</a>}
                            description={
                                <>
                                    <a href={item.href} >description="力扣"</a> 
                                    &nbsp; &gt; &nbsp;
                                    <a href={item.href} ><InstagramOutlined /></a>
                                </>
                            }
                        >
                            
                        </List.Item.Meta>
                    </List.Item>
                )}
            />
            <Row>
                <Col xs={{ span: 8 }}>
                    <Button type="primary" className={styles.ColBtn}>
                        <QuestionCircleOutlined style={{ fontSize: "28px"}} />
                        <div>收藏夹</div>
                    </Button>
                </Col>
                <Col xs={{ span: 8 }}>
                    <Button type="primary" className={styles.ColBtn}>
                        <QuestionCircleOutlined style={{ fontSize: "28px" }} />
                        <div>收藏夹</div>
                    </Button>
                </Col>
                <Col xs={{ span: 8 }}>
                    <Button type="primary" className={styles.ColBtn}>
                        <QuestionCircleOutlined style={{ fontSize: "28px" }} />
                        <div>收藏夹</div>
                    </Button>
                </Col>
            </Row>
            <Row>
                <Col xs={{ span: 8 }}>
                    <Button type="primary" className={styles.ColBtn}>
                        <QuestionCircleOutlined style={{ fontSize: "28px" }} />
                        <div>收藏夹</div>
                    </Button>
                </Col>
                <Col xs={{ span: 8 }}>
                    <Button type="primary" className={styles.ColBtn}>
                        <QuestionCircleOutlined style={{ fontSize: "28px" }} />
                        <div>收藏夹</div>
                    </Button>
                </Col>
                <Col xs={{ span: 8 }}>
                    <Button type="primary" className={styles.ColBtn}>
                        <QuestionCircleOutlined style={{ fontSize: "28px" }} />
                        <div>收藏夹</div>
                    </Button>
                </Col>
            </Row>
            <Button type="link" className={styles.tableBtn}><InstagramOutlined />订单</Button>
            <Button type="link" className={styles.tableBtn}><InstagramOutlined />订单</Button>
            <Button type="link" className={styles.tableBtn}><InstagramOutlined />订单</Button>
            <Button type="link" className={styles.tableBtn}><InstagramOutlined />订单</Button>
            <Button type="link" className={styles.tableBtn}><InstagramOutlined />订单</Button>
            <Button type="link" className={styles.tableBtn} onClick={onClick}><InstagramOutlined />退出</Button>
        </div>
    )
}

export default UserDropDown